<template>
  <div class="result-view">
    <!-- 装饰背景 -->
    <div class="decoration">
      <span class="floating-card">🃏</span>
      <span class="floating-card">♠️</span>
      <span class="floating-card">♥️</span>
      <span class="floating-card">♣️</span>
      <span class="floating-card">♦️</span>
      <span class="floating-coin">💰</span>
      <span class="floating-coin">✨</span>
    </div>

    <div class="result-container">
      <!-- 标题区域 -->
      <div class="header">
        <div class="title-wrapper">
          <div class="title-icon">🎉</div>
          <h2 class="title">游戏结算</h2>
          <div class="title-subtitle">本局游戏结果统计</div>
        </div>
      </div>
      
      <!-- 玩家排名卡片 -->
      <div class="ranking-section">
        <div class="ranking-title">
          <span class="rank-icon">🏆</span>
          <span class="rank-text">玩家排名</span>
        </div>
        <div 
          v-for="(result, index) in gameResult?.results || []" 
          :key="result.player.id" 
          class="player-card"
          :class="[getRankClass(index), getLevelClass(result.level)]"
          :style="{ animationDelay: `${index * 0.2}s` }"
        >
          <div class="rank-number">{{ index + 1 }}</div>
          <div class="player-avatar-wrapper">
            <div class="player-avatar">{{ result.player.avatar }}</div>
            <div class="trophy-badge">{{ getTrophyIcon(index) }}</div>
          </div>
          <div class="player-details">
            <div class="player-name">{{ result.player.name }}</div>
            <div class="player-stats">
              <div class="stat-item">
                <span class="stat-value">{{ result.collected }}</span>
                <span class="stat-label">收牌</span>
              </div>
              <div class="level-badge" :class="getLevelClass(result.level)">
                {{ result.level }}
              </div>
            </div>
          </div>
          <div class="rank-decoration"></div>
        </div>
      </div>

      <!-- 星光币结算卡片 -->
      <div class="coin-settlement">
        <div class="coin-header">
          <div class="coin-icon-wrapper">
            <div class="coin-icon">💰</div>
          </div>
          <div class="coin-title">星光币结算</div>
        </div>
        
        <div class="balance-section">
          <div class="balance-card main-balance">
            <div class="balance-icon">💎</div>
            <div class="balance-content">
              <div class="balance-label">当前余额</div>
              <div class="balance-value">{{ currentPlayer?.starCoins || 0 }}</div>
              <div class="balance-unit">星光币</div>
            </div>
            <div class="balance-sparkle">✨</div>
          </div>
          
          <div v-if="balanceChange !== 0" class="change-indicator" :class="{ positive: balanceChange > 0, negative: balanceChange < 0 }">
            <div class="change-arrow">{{ balanceChange > 0 ? '↗️' : '↘️' }}</div>
            <div class="change-text">
              <span class="change-label">{{ balanceChange > 0 ? '本局收益' : '本局支出' }}</span>
              <span class="change-value">{{ Math.abs(balanceChange) }}</span>
            </div>
          </div>
        </div>

        <!-- 支付流水 -->
        <div v-if="gameResult?.payments?.length > 0" class="payment-flows">
          <div class="flow-header">
            <div class="flow-icon">📊</div>
            <div class="flow-title">资金流水</div>
          </div>
          <div class="flow-list">
            <div v-for="(payment, index) in gameResult.payments" :key="index" 
                 class="flow-item" 
                 :class="{ 'risk-payment': payment.type === 'risk' }"
                 :style="{ animationDelay: `${index * 0.1 + 0.6}s` }">
              <div class="flow-from">
                <div class="flow-avatar">{{ getPlayerAvatar(payment.from) }}</div>
                <div class="flow-name">{{ getPlayerName(payment.from) }}</div>
              </div>
              <div class="flow-arrow">
                <div class="arrow-trail"></div>
                <div class="arrow-head">→</div>
                <div class="flow-amount">
                  <span v-if="payment.type === 'risk'" class="risk-indicator">风险</span>
                  {{ payment.amount }}币
                </div>
              </div>
              <div class="flow-to">
                <div class="flow-avatar">{{ getPlayerAvatar(payment.to) }}</div>
                <div class="flow-name">{{ getPlayerName(payment.to) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <button @click="playAgain" class="action-btn primary">
          <div class="btn-ripple"></div>
          <div class="btn-content">
            <span class="btn-icon">🎮</span>
            <span class="btn-text">再来一局</span>
          </div>
        </button>
        <button @click="backToMenu" class="action-btn secondary">
          <div class="btn-ripple"></div>
          <div class="btn-content">
            <span class="btn-icon">🏠</span>
            <span class="btn-text">返回菜单</span>
          </div>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue';
import { useGameStore } from '../store/game';
import { audioManager } from '../utils/AudioManager.js';

const gameStore = useGameStore();

const gameResult = computed(() => gameStore.gameResult);
const currentPlayer = computed(() => gameStore.currentPlayer);

const balanceChange = ref(0);

onMounted(() => {
  // 计算余额变化
  if (gameResult.value && currentPlayer.value) {
    const payments = gameResult.value.payments;
    let change = 0;
    
    payments.forEach(payment => {
      if (payment.from === currentPlayer.value.id) {
        change -= payment.amount;
      } else if (payment.to === currentPlayer.value.id) {
        change += payment.amount;
      }
    });
    
    balanceChange.value = change;
  }
});

const getLevelClass = (level) => {
  const classMap = {
    '此了': 'level-best',
    '五了': 'level-good',
    '刚够': 'level-ok',
    '不够': 'level-bad'
  };
  return classMap[level] || '';
};

const getRankClass = (index) => {
  const rankClasses = ['first-place', 'second-place', 'third-place'];
  return rankClasses[index] || '';
};

const getRankText = (index) => {
  const rankTexts = ['1st', '2nd', '3rd'];
  return rankTexts[index] || `${index + 1}th`;
};

const getTrophyIcon = (index) => {
  const trophyIcons = ['🥇', '🥈', '🥉'];
  return trophyIcons[index] || '🏅';
};

const getPlayerAvatar = (playerId) => {
  const result = gameResult.value?.results.find(r => r.player.id === playerId);
  return result?.player.avatar || '👤';
};

const getPlayerName = (playerId) => {
  const result = gameResult.value?.results.find(r => r.player.id === playerId);
  return result?.player.name || '未知玩家';
};

const playAgain = () => {
  // 播放洗牌音效
  try {
    audioManager.playShuffleSound();
  } catch (error) {
    console.warn('洗牌音效播放失败:', error);
  }
  
  gameStore.playAgain();
};

const backToMenu = () => {
  gameStore.backToMenu();
};
</script>

<style scoped>
.result-view {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
  overflow: hidden;
  padding: 16px;
  box-sizing: border-box;
}

.result-view::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
  pointer-events: none;
}

/* 装饰背景 */
.decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.floating-card, .floating-coin {
  position: absolute;
  font-size: 60px;
  opacity: 0.1;
  animation: floatAnimation 15s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

.floating-card:nth-child(1) {
  top: 5%;
  left: 5%;
  animation-delay: 0s;
}

.floating-card:nth-child(2) {
  top: 15%;
  right: 10%;
  animation-delay: 3s;
}

.floating-card:nth-child(3) {
  bottom: 15%;
  left: 15%;
  animation-delay: 6s;
}

.floating-card:nth-child(4) {
  bottom: 25%;
  right: 5%;
  animation-delay: 9s;
}

.floating-card:nth-child(5) {
  top: 45%;
  left: 8%;
  animation-delay: 12s;
}

.floating-coin:nth-child(6) {
  top: 25%;
  right: 25%;
  animation-delay: 2s;
}

.floating-coin:nth-child(7) {
  bottom: 35%;
  left: 30%;
  animation-delay: 8s;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-20px) rotate(5deg) scale(1.1);
  }
  50% {
    transform: translateY(-10px) rotate(-2deg) scale(0.9);
  }
  75% {
    transform: translateY(20px) rotate(-5deg) scale(1.05);
  }
}

.result-container {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  padding: 25px; /* 从35px减小到25px */
  max-width: 500px;
  width: 100%;
  max-height: 85vh; /* 从90vh减小到85vh */
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 18px; /* 从25px减小到18px */
  overflow-y: auto;
  position: relative;
  animation: containerSlideIn 0.8s ease-out;
}

.result-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 3s infinite;
}

@keyframes containerSlideIn {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 标题区域 */
.header {
  text-align: center;
  margin-bottom: 5px; /* 从10px减小到5px */
}

.title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px; /* 从8px减小到5px */
}

.title-icon {
  font-size: 36px; /* 从48px减小到36px */
  animation: celebrateAnimation 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
}

@keyframes celebrateAnimation {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.2) rotate(-10deg); }
  75% { transform: scale(1.1) rotate(10deg); }
}

.title {
  font-size: 26px; /* 从32px减小到26px */
  font-weight: bold;
  background: linear-gradient(45deg, #ffd700, #ff6b6b, #4ecdc4, #45b7d1);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
  animation: titleGradient 4s ease-in-out infinite;
  letter-spacing: 1px;
}

.title-subtitle {
  font-size: 14px; /* 从16px减小到14px */
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
}

@keyframes titleGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 玩家排名区域 */
.ranking-section {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 从15px减小到10px */
}

.ranking-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px; /* 从8px减小到6px */
  font-size: 18px; /* 从20px减小到18px */
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  margin-bottom: 2px; /* 从5px减小到2px */
}

.rank-icon {
  font-size: 20px; /* 从24px减小到20px */
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.2); filter: brightness(1.5); }
}

.player-card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 14px; /* 从18px减小到14px */
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  animation: cardSlideIn 0.6s ease-out both;
}

@keyframes cardSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.player-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
  pointer-events: none;
}

.player-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.player-card.first-place {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 193, 7, 0.2));
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

.player-card.second-place {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.3), rgba(169, 169, 169, 0.2));
  border-color: rgba(192, 192, 192, 0.5);
  box-shadow: 0 6px 20px rgba(192, 192, 192, 0.3);
}

.player-card.third-place {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.3), rgba(184, 115, 51, 0.2));
  border-color: rgba(205, 127, 50, 0.5);
  box-shadow: 0 6px 20px rgba(205, 127, 50, 0.3);
}

.rank-number {
  background: linear-gradient(135deg, #ffd700, #ffab00);
  color: #1a1a2e;
  width: 30px; /* 从35px减小到30px */
  height: 30px; /* 从35px减小到30px */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px; /* 从18px减小到16px */
  margin-right: 12px; /* 从15px减小到12px */
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.player-avatar-wrapper {
  position: relative;
  margin-right: 12px; /* 从15px减小到12px */
}

.player-avatar {
  font-size: 32px; /* 从40px减小到32px */
  width: 45px; /* 从55px减小到45px */
  height: 45px; /* 从55px减小到45px */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
}

.trophy-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 16px; /* 从18px减小到16px */
  animation: trophyBounce 1s ease-in-out infinite alternate;
}

@keyframes trophyBounce {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

.player-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.player-name {
  font-size: 18px; /* 从20px减小到18px */
  font-weight: bold;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.player-stats {
  display: flex;
  align-items: center;
  gap: 10px; /* 从12px减小到10px */
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px; /* 从2px减小到1px */
}

.stat-value {
  font-size: 18px; /* 从20px减小到18px */
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
}

.stat-label {
  font-size: 11px; /* 从12px减小到11px */
  color: rgba(255, 255, 255, 0.7);
}

.level-badge {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.level-badge.level-best {
  background: linear-gradient(135deg, #f093fb, #f5576c);
  color: white;
}

.level-badge.level-good {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: white;
}

.level-badge.level-ok {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  color: white;
}

.level-badge.level-bad {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  color: #8b5a5a;
}

.rank-decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 0 20px 0 20px;
}

/* 星光币结算区域 */
.coin-settlement {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 18px; /* 从25px减小到18px */
  border: 1px solid rgba(255, 255, 255, 0.15);
  animation: coinSlideIn 0.8s ease-out 0.3s both;
}

@keyframes coinSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.coin-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 从10px减小到8px */
  margin-bottom: 15px; /* 从20px减小到15px */
}

.coin-icon-wrapper {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 193, 7, 0.2));
  border-radius: 50%;
  padding: 6px; /* 从8px减小到6px */
  animation: coinRotate 3s linear infinite;
}

@keyframes coinRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.coin-icon {
  font-size: 24px; /* 从28px减小到24px */
}

.coin-title {
  font-size: 18px; /* 从22px减小到18px */
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.balance-section {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 从15px减小到12px */
  margin-bottom: 15px; /* 从20px减小到15px */
}

.main-balance {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 193, 7, 0.1));
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 15px;
  padding: 15px; /* 从20px减小到15px */
  display: flex;
  align-items: center;
  gap: 12px; /* 从15px减小到12px */
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
  animation: balanceGlow 2s ease-in-out infinite alternate;
}

@keyframes balanceGlow {
  0% { box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2); }
  100% { box-shadow: 0 8px 35px rgba(255, 215, 0, 0.4); }
}

.balance-icon {
  font-size: 28px; /* 从32px减小到28px */
  animation: sparkleRotate 4s ease-in-out infinite;
}

@keyframes sparkleRotate {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
}

.balance-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px; /* 从4px减小到3px */
}

.balance-label {
  font-size: 12px; /* 从14px减小到12px */
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.balance-value {
  font-size: 24px; /* 从28px减小到24px */
  font-weight: bold;
  color: #ffd700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.balance-unit {
  font-size: 11px; /* 从12px减小到11px */
  color: rgba(255, 255, 255, 0.7);
}

.balance-sparkle {
  font-size: 20px; /* 从24px减小到20px */
  animation: sparkleAnimation 1.5s ease-in-out infinite;
}

@keyframes sparkleAnimation {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.3) rotate(180deg); opacity: 1; }
}

.change-indicator {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: changeSlideIn 0.6s ease-out 0.5s both;
}

@keyframes changeSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.change-indicator.positive {
  border: 1px solid rgba(76, 175, 80, 0.4);
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1));
}

.change-indicator.negative {
  border: 1px solid rgba(244, 67, 54, 0.4);
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.2), rgba(244, 67, 54, 0.1));
}

.change-arrow {
  font-size: 24px;
}

.change-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.change-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.change-value {
  font-size: 20px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.95);
}

/* 支付流水 */
.payment-flows {
  margin-top: 15px;
}

.flow-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 15px;
}

.flow-icon {
  font-size: 18px;
}

.flow-title {
  font-size: 16px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
}

.flow-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flow-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: flowItemSlideIn 0.5s ease-out both;
}

.flow-item.risk-payment {
  background: rgba(255, 152, 0, 0.1);
  border-color: rgba(255, 152, 0, 0.3);
  box-shadow: 0 0 20px rgba(255, 152, 0, 0.1);
}

.risk-indicator {
  display: inline-block;
  background: #ff9800;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@keyframes flowItemSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flow-from, .flow-to {
  display: flex;
  align-items: center;
  gap: 6px;
}

.flow-avatar {
  font-size: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.flow-name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-arrow {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.arrow-trail {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 215, 0, 0.5));
  border-radius: 2px;
  animation: arrowFlow 2s ease-in-out infinite;
}

@keyframes arrowFlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.arrow-head {
  font-size: 16px;
  color: rgba(255, 215, 0, 0.8);
}

.flow-amount {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 193, 7, 0.2));
  color: #ffd700;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 12px; /* 从15px减小到12px */
  margin-top: 5px; /* 从10px减小到5px */
}

.action-btn {
  flex: 1;
  border: none;
  border-radius: 20px;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: buttonSlideIn 0.6s ease-out 0.4s both;
}

@keyframes buttonSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.action-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.action-btn.secondary {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 8px 25px rgba(240, 147, 251, 0.4);
}

.action-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.action-btn:active {
  transform: translateY(-1px);
}

.btn-ripple {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}

.action-btn:hover .btn-ripple {
  left: 100%;
}

.btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px; /* 从8px减小到6px */
  padding: 14px 18px; /* 从16px 20px减小到14px 18px */
  color: white;
  font-weight: bold;
  font-size: 15px; /* 从16px减小到15px */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-icon {
  font-size: 18px; /* 从20px减小到18px */
}

/* 移动端响应式设计优化 */
@media (max-width: 480px) {
  .result-view {
    padding: 10px;
  }
  
  .result-container {
    padding: 20px 18px;
    gap: 18px;
    border-radius: 25px;
  }
  
  /* 标题区域移动端优化 */
  .title {
    font-size: 28px;
    letter-spacing: 0.5px;
  }
  
  .title-icon {
    font-size: 42px;
  }
  
  .title-subtitle {
    font-size: 15px;
    margin-top: 4px;
  }
  
  /* 排名区域移动端优化 */
  .ranking-title {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .rank-icon {
    font-size: 22px;
  }
  
  .player-card {
    padding: 16px;
    border-radius: 18px;
    margin-bottom: 2px;
  }
  
  .rank-number {
    width: 32px;
    height: 32px;
    font-size: 16px;
    margin-right: 12px;
  }
  
  .player-avatar {
    font-size: 36px;
    width: 50px;
    height: 50px;
  }
  
  .player-avatar-wrapper {
    margin-right: 12px;
  }
  
  .trophy-badge {
    font-size: 16px;
    top: -4px;
    right: -4px;
  }
  
  .player-name {
    font-size: 19px;
    margin-bottom: 2px;
  }
  
  .stat-value {
    font-size: 18px;
  }
  
  .stat-label {
    font-size: 12px;
  }
  
  .level-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 10px;
  }
  
  /* 星光币区域移动端优化 */
  .coin-settlement {
    padding: 20px;
    border-radius: 18px;
  }
  
  .coin-header {
    margin-bottom: 18px;
  }
  
  .coin-icon {
    font-size: 26px;
  }
  
  .coin-title {
    font-size: 20px;
  }
  
  .balance-section {
    gap: 15px;
    margin-bottom: 18px;
  }
  
  .main-balance {
    padding: 18px;
    border-radius: 15px;
  }
  
  .balance-icon {
    font-size: 30px;
  }
  
  .balance-value {
    font-size: 26px;
  }
  
  .balance-label {
    font-size: 13px;
  }
  
  .balance-unit {
    font-size: 11px;
  }
  
  .balance-sparkle {
    font-size: 22px;
  }
  
  .change-indicator {
    padding: 12px;
    border-radius: 12px;
  }
  
  .change-arrow {
    font-size: 22px;
  }
  
  .change-label {
    font-size: 12px;
  }
  
  .change-value {
    font-size: 18px;
  }
  
  /* 支付流水移动端优化 */
  .flow-header {
    margin-bottom: 12px;
  }
  
  .flow-icon {
    font-size: 16px;
  }
  
  .flow-title {
    font-size: 15px;
  }
  
  .flow-item {
    padding: 12px;
    border-radius: 12px;
  }
  
  .flow-avatar {
    font-size: 18px;
    width: 28px;
    height: 28px;
  }
  
  .flow-name {
    font-size: 11px;
    max-width: 65px;
  }
  
  .arrow-head {
    font-size: 16px;
  }
  
  .flow-amount {
    font-size: 11px;
    padding: 3px 7px;
  }
  
  /* 操作按钮移动端优化 */
  .action-buttons {
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
  }
  
  .action-btn {
    width: 100%;
    min-width: auto;
    max-width: none;
  }
  
  .btn-content {
    padding: 16px 20px;
    font-size: 16px;
    gap: 8px;
  }
  
  .btn-icon {
    font-size: 20px;
  }
  
  /* 装饰背景移动端调整 */
  .floating-card, .floating-coin {
    font-size: 50px;
    opacity: 0.12;
  }
}

/* 中等屏幕高度优化 */
@media (max-height: 700px) and (orientation: portrait) {
  .result-container {
    padding: 18px;
    gap: 15px;
    max-height: 95vh;
  }
  
  .title {
    font-size: 26px;
  }
  
  .title-icon {
    font-size: 38px;
  }
  
  .title-subtitle {
    font-size: 14px;
  }
  
  .player-card {
    padding: 14px;
  }
  
  .coin-settlement {
    padding: 18px;
  }
  
  .main-balance {
    padding: 16px;
  }
  
  .balance-value {
    font-size: 24px;
  }
  
  .action-buttons {
    margin-top: 8px;
  }
  
  .btn-content {
    padding: 14px 18px;
    font-size: 15px;
  }
}

/* 横屏适配 - 重构美化版本 */
@media (orientation: landscape) and (max-height: 600px) {
  .result-view {
    padding: 8px;
  }
  
  .result-container {
    max-width: 95vw;
    max-height: 95vh;
    padding: 20px;
    gap: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  /* 标题区域优化 */
  .header {
    width: 100%;
    margin-bottom: 0;
    text-align: center;
    order: 1;
  }
  
  .title {
    font-size: 24px;
    margin: 0;
  }
  
  .title-icon {
    font-size: 32px;
  }
  
  .title-subtitle {
    font-size: 14px;
  }
  
  /* 排名区域横屏布局 */
  .ranking-section {
    flex: 1;
    min-width: 45%;
    max-width: 48%;
    gap: 10px;
    order: 2;
  }
  
  .ranking-title {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .rank-icon {
    font-size: 20px;
  }
  
  .player-card {
    padding: 12px;
    border-radius: 15px;
    min-height: auto;
  }
  
  .rank-number {
    width: 28px;
    height: 28px;
    font-size: 14px;
    margin-right: 10px;
  }
  
  .player-avatar {
    font-size: 28px;
    width: 40px;
    height: 40px;
  }
  
  .player-avatar-wrapper {
    margin-right: 10px;
  }
  
  .trophy-badge {
    font-size: 14px;
    top: -3px;
    right: -3px;
  }
  
  .player-name {
    font-size: 16px;
  }
  
  .stat-value {
    font-size: 16px;
  }
  
  .stat-label {
    font-size: 11px;
  }
  
  .level-badge {
    font-size: 11px;
    padding: 3px 8px;
  }
  
  /* 星光币结算区域横屏布局 */
  .coin-settlement {
    flex: 1;
    min-width: 45%;
    max-width: 48%;
    padding: 15px;
    order: 3;
  }
  
  .coin-header {
    margin-bottom: 12px; /* 从15px减小到12px */
  }
  
  .coin-icon {
    font-size: 20px; /* 从22px减小到20px */
  }
  
  .coin-title {
    font-size: 16px; /* 从18px减小到16px */
  }
  
  .balance-section {
    gap: 10px; /* 从12px减小到10px */
    margin-bottom: 12px; /* 从15px减小到12px */
  }
  
  .balance-content {
    gap: 2px; /* 从3px减小到2px，让内容更紧凑 */
  }
  
  .main-balance {
    padding: 10px 12px; /* 从15px减小到10px 12px */
    gap: 10px; /* 从12px减小到10px */
    border-radius: 12px; /* 从15px减小到12px */
  }
  
  .balance-icon {
    font-size: 20px; /* 从24px减小到20px */
  }
  
  .balance-value {
    font-size: 18px; /* 从22px减小到18px */
  }
  
  .balance-label {
    font-size: 11px; /* 从12px减小到11px */
  }
  
  .balance-unit {
    font-size: 10px; /* 从11px减小到10px */
  }
  
  .balance-sparkle {
    font-size: 16px; /* 从18px减小到16px */
  }
  
  .change-indicator {
    padding: 10px;
    gap: 8px;
  }
  
  .change-arrow {
    font-size: 18px;
  }
  
  .change-label {
    font-size: 11px;
  }
  
  .change-value {
    font-size: 16px;
  }
  
  /* 支付流水优化 */
  .payment-flows {
    margin-top: 10px;
  }
  
  .flow-header {
    margin-bottom: 10px;
  }
  
  .flow-icon {
    font-size: 16px;
  }
  
  .flow-title {
    font-size: 14px;
  }
  
  .flow-item {
    padding: 8px;
    gap: 8px;
    border-radius: 10px;
  }
  
  .flow-avatar {
    font-size: 16px;
    width: 24px;
    height: 24px;
  }
  
  .flow-name {
    font-size: 10px;
    max-width: 50px;
  }
  
  .arrow-head {
    font-size: 14px;
  }
  
  .flow-amount {
    font-size: 10px;
    padding: 2px 6px;
  }
  
  /* 操作按钮横屏布局 */
  .action-buttons {
    width: 100%;
    gap: 12px;
    margin-top: 5px;
    order: 4;
    justify-content: center;
  }
  
  .action-btn {
    flex: none;
    min-width: 140px;
    max-width: 160px;
  }
  
  .btn-content {
    padding: 12px 16px;
    font-size: 14px;
    gap: 6px;
  }
  
  .btn-icon {
    font-size: 16px;
  }
  
  /* 装饰背景在横屏时减少 */
  .floating-card, .floating-coin {
    font-size: 40px;
    opacity: 0.08;
  }
}

/* 小屏幕横屏特别优化 */
@media (orientation: landscape) and (max-height: 480px) {
  .result-view {
    padding: 6px;
  }
  
  .result-container {
    padding: 15px;
    gap: 10px;
  }
  
  /* 标题区域精简 */
  .header {
    margin-bottom: -5px;
  }
  
  .title {
    font-size: 20px;
  }
  
  .title-icon {
    font-size: 26px;
  }
  
  .title-subtitle {
    font-size: 12px;
  }
  
  /* 排名区域精简 */
  .ranking-section {
    gap: 8px;
  }
  
  .ranking-title {
    font-size: 14px;
    margin-bottom: 6px;
  }
  
  .rank-icon {
    font-size: 16px;
  }
  
  .player-card {
    padding: 8px;
    border-radius: 12px;
  }
  
  .rank-number {
    width: 24px;
    height: 24px;
    font-size: 12px;
    margin-right: 8px;
  }
  
  .player-avatar {
    font-size: 22px;
    width: 32px;
    height: 32px;
  }
  
  .player-avatar-wrapper {
    margin-right: 8px;
  }
  
  .trophy-badge {
    font-size: 12px;
  }
  
  .player-name {
    font-size: 14px;
  }
  
  .stat-value {
    font-size: 14px;
  }
  
  .stat-label {
    font-size: 10px;
  }
  
  .level-badge {
    font-size: 10px;
    padding: 2px 6px;
  }
  
  /* 星光币区域精简 */
  .coin-settlement {
    padding: 12px;
  }
  
  .coin-header {
    margin-bottom: 12px;
  }
  
  .coin-icon {
    font-size: 18px;
  }
  
  .coin-title {
    font-size: 15px;
  }
  
  .balance-section {
    gap: 8px;
    margin-bottom: 12px;
  }
  
  .main-balance {
    padding: 8px 10px; /* 从12px减小到8px 10px */
    gap: 8px; /* 从10px减小到8px */
    border-radius: 10px; /* 添加圆角调整 */
  }
  
  .balance-icon {
    font-size: 18px; /* 从20px减小到18px */
  }
  
  .balance-value {
    font-size: 16px; /* 从18px减小到16px */
  }
  
  .balance-label {
    font-size: 10px; /* 从11px减小到10px */
  }
  
  .balance-unit {
    font-size: 9px; /* 从10px减小到9px */
  }
  
  .balance-sparkle {
    font-size: 14px; /* 从16px减小到14px */
  }
  
  .change-indicator {
    padding: 8px;
    gap: 6px;
  }
  
  .change-arrow {
    font-size: 16px;
  }
  
  .change-label {
    font-size: 10px;
  }
  
  .change-value {
    font-size: 14px;
  }
  
  /* 支付流水进一步精简 */
  .payment-flows {
    margin-top: 8px;
  }
  
  .flow-header {
    margin-bottom: 8px;
  }
  
  .flow-icon {
    font-size: 14px;
  }
  
  .flow-title {
    font-size: 12px;
  }
  
  .flow-item {
    padding: 6px;
    gap: 6px;
  }
  
  .flow-avatar {
    font-size: 14px;
    width: 20px;
    height: 20px;
  }
  
  .flow-name {
    font-size: 9px;
    max-width: 40px;
  }
  
  .arrow-head {
    font-size: 12px;
  }
  
  .flow-amount {
    font-size: 9px;
    padding: 2px 4px;
  }
  
  /* 操作按钮进一步精简 */
  .action-buttons {
    margin-top: 0;
    gap: 10px;
  }
  
  .action-btn {
    min-width: 120px;
    max-width: 140px;
  }
  
  .btn-content {
    padding: 10px 14px;
    font-size: 12px;
    gap: 5px;
  }
  
  .btn-icon {
    font-size: 14px;
  }
  
  /* 装饰背景进一步减少 */
  .floating-card, .floating-coin {
    font-size: 30px;
    opacity: 0.05;
  }
}

/* 极小屏幕横屏特殊处理 */
@media (orientation: landscape) and (max-height: 400px) {
  .result-container {
    padding: 10px;
    gap: 8px;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-y: auto;
  }
  
  .header {
    width: 20%;
    min-width: 120px;
    order: 1;
    text-align: left;
    padding-right: 10px;
  }
  
  .ranking-section {
    flex: 1;
    min-width: 35%;
    max-width: 40%;
    order: 2;
  }
  
  .coin-settlement {
    flex: 1;
    min-width: 35%;
    max-width: 40%;
    order: 3;
  }
  
  .action-buttons {
    width: auto;
    flex-direction: column;
    gap: 6px;
    order: 4;
    min-width: 80px;
  }
  
  .action-btn {
    min-width: 80px;
    max-width: 80px;
  }
  
  .btn-content {
    padding: 8px;
    font-size: 11px;
    flex-direction: column;
    gap: 2px;
  }
  
  .btn-icon {
    font-size: 16px;
  }
  
  /* 隐藏装饰背景 */
  .decoration {
    display: none;
  }
}
</style>